import React, { createRef, Component } from 'react'
import BetterScroll from 'better-scroll'
import bsStyle from './style.module.css'
// import { arr } from '../../mock'
/**
 * 1. 封装一个better-scroll组件
 * 2. 任何组件/元素。被他包裹之后，都能实现better-scroll效果
 *
 * 可是区域窗口 ref
 * 内容区域
 *
 * 子组件：
 * 1. 子组件告诉父组件，我结束上拉 下拉
 *
 *
 */
// console.log(arr, 'arr')
// // 模拟异步接口
// const createData = ({ page = 1, size = 10 }) => {
//   return new Promise((resolve, reject) => {
//     setTimeout(() => {
//       resolve(arr.slice((page - 1) * size, page * size))
//     }, 1000)
//   })
// }

class MyScroll extends Component {
  constructor(props) {
    super(props)
    this.state = {
      page: 1,
      size: 10,
      list: [],
    }
    this.myRef = createRef()
  }

  componentDidMount() {
    console.log('接收的参数：', this.props)
    // this.bsFunc()
  }

  componentDidUpdate() {
    console.log(this.props, '接收update')
    if (this.props.flag) {
      this.bsFunc()
    }
  }

  bsFunc = () => {
    const { handlePullingDown, handlePullingUp } = this.props

    this.bs = new BetterScroll(this.myRef.current, {
      // 开启 下拉
      pullDownRefresh: {
        threshold: 50, // 阀值
        stop: 20,
      },
      // 开启 上拉
      pullUpLoad: {
        threshold: 50,
      },
    })

    // 监听事件
    this.bs.on('pullingDown', () => {
      console.log('下拉')
      // 1. 通过子父传递参数，告诉父组件我结束了下拉
      // 2. 父组件接收到这个消息之后，要干什么？请求接口，子组件要知道父组件请求完毕
      // 3. 子组件要刷新页面，重新计算滚动条高度，结束下拉刷新
      handlePullingDown &&
        handlePullingDown((res) => {
          this.bs.finishPullDown()
          this.bs.refresh()
        })
      // createData({ page: this.state.page }).then((res) => {
      //   this.fetchList({})
      //   this.bs.refresh()
      //   this.bs.finishPullDown()
      // })
    })
    // setState 可以是异步 也可以是同步，
    // 1. 在非react事件监听中，是同步
    // 2. 在定时器中，也是同步
    this.bs.on('pullingUp', () => {
      console.log('上拉')
      handlePullingUp &&
        handlePullingUp((res) => {
          console.log('子组件:', res)
          this.bs.finishPullUp()
          this.bs.refresh()
        })
      // this.setState({ page: this.state.page + 1 })
      // console.log('同步获取：', this.state.page)
      // createData({ page: this.state.page }).then((res) => {
      //   console.log('res, ', res)
      //   this.setState({ list: [...this.state.list, ...res] })
      //   // console.log('this.lst:同步获取：', this.state.list)
      //   this.bs.refresh()
      //   this.bs.finishPullUp()
      // })
    })
  }

  // 防止内存泄漏操作
  componentWillUnmount() {
    // console.log(this.bs, 'bs')
    this.bs = null
  }

  render() {
    return (
      <div ref={this.myRef} className={bsStyle['bs-wrapper']}>
        <div className={bsStyle['bs-content']}>
          {this.props.children}
          {/* {this.state.list.map((item) => {
            return (
              <section key={item.id} className={bsStyle['bs-item']}>
                {item.productInfo}
              </section>
            )
          })} */}
        </div>
      </div>
    )
  }
}

export default MyScroll
